<template>
  <div>
    <h1>详情页面</h1>

    <input type="text" placeholder="用户名" v-model="username" />

    <router-link :to="{ name: 'detail', query: { id: 200 } }">
      Banana
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },

  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next();
  },

  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    next();
  },

  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    next();
  },
};
</script>
